//住院护士工作站
<template>
  <el-row style='height:600px; overflow: hidden;'>
    <el-col :span="24" class="section-option" >
      <TopManu @handsplitben="handsplitben" ></TopManu>
    </el-col>
    <el-col :span="24">
      <el-col :span="7" class="hospitalNurse-left">
        <ViewTitle text="病区列表" />
        <el-col :span="24" style="margin:20px 0;">
          <FromList :tableTitle="wardTitle" :tableData="wardData" />
        </el-col>
        <ViewTitle text="患者列表" />
        <el-col :span="24" style="margin:20px 0 0 0">
          <el-input
            placeholder="请输入姓名/门诊号/身份证号"
            v-model="leftValue"
          >
            <el-button slot="append" icon="el-icon-search">
              查询
            </el-button>
          </el-input>
        </el-col>
        <el-col style="margin:20px 0 0 0;height:200px;overflow: auto;">
          <FromList :tableTitle="tableTitle" :tableData="tableData" />
        </el-col>
      </el-col>
      <el-col :span="17" class="hospitalNurse-right">
        <el-form :inline="true" class="demo-form-inline" v-model="formInline">
          <el-form-item label="搜索">
            <el-input
              placeholder="请输入姓名/门诊号/身份证号"
              v-model="formInline.rightKeyValue"
            >
              <el-button slot="append" icon="el-icon-search">
                查询
              </el-button>
            </el-input>
          </el-form-item>
          <el-form-item>
           
            <el-radio-group v-model="is_lock" @change='is_lockchang()'>
             <el-radio label="4" value='4'>当天入院</el-radio>
              <el-radio label="" value=''>全部</el-radio>
              <el-radio label="2" value='1'>空闲</el-radio>
              <el-radio label="1" value='2'>占用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <el-col :span="24" style='height:500px;overflow: auto;'>
          <div class="hosptal-grid">
            <el-card
              class="hosptal-card"
              :body-style="{ padding: '0px' }"
              v-for="(item, index) in ben_list"
              :key="index"
            >
              <el-col :span="24">
                <el-col :span="24" class="card-title">
                  <div class="">{{ item.name }}</div>
                </el-col>
                <div v-if="item.hospital">
                  <div class="box_user" style="padding:20px;">
                    <el-col :span="24" class="card-span">
                      <el-col :span="8"
                        ><img src="@/assets/icon-test.png" class="img_box" />
                      </el-col>

                      <el-col :span="16"
                        >{{ item.hospital.name }}/{{
                          item.hospital.gender == 1 ? "男" : "女"
                        }}/{{ item.hospital.age }}岁</el-col
                      >
                    </el-col>
                    <el-col :span="24">
                      <el-col :span="24" style="paddingTop:20px;">
                        <el-col :span="12">
                          <div>
                            <span class="span_title">押金:</span
                            >{{ item.hospital.wallet.wallet_income}}
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div>
                            <span class="span_title">人员类型：</span>自费
                          </div>
                        </el-col>
                      </el-col>
                      <el-col :span="24" style="paddingTop:10px;">
                        <el-col :span="12">
                          <div>
                            <span class="span_title">医生： </span
                            >{{ item.hospital.docker_name }}
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <div>
                            <span class="span_title">护士: </span
                            >{{ item.hospital.nurse_name }}
                          </div>
                        </el-col>
                      </el-col>
                      <el-col :span="24" style="paddingTop:10px;">
                        <div>
                          <span class="span_title">病区: </span
                          >{{ item.hospital.room_name }}
                        </div>
                      </el-col>

                      <el-col :span="24" style="paddingTop:10px;">
                        <div>
                          <span class="span_title">护理级别: </span
                          ><span>{{ item.hospital.nurse_level }}</span>
                        </div>
                      </el-col>

                      <el-col :span="24" style="paddingTop:10px;">
                        <el-col :span="8" class="span_title">风险评估:</el-col>
                        <el-col :span="16" class="card-label">
                          <div>自伤自杀</div>
                        </el-col>
                      </el-col>
                    </el-col>
                  </div>
                </div>
                <div v-else class="img_kong_box">
                  <img src="@/assets/chuang.png" class="img_kong" />
                </div>
              </el-col>
            </el-card>
          </div>
        </el-col>
      </el-col>
    </el-col>
  </el-row>
</template>

<script>
import FromList from "@/forComponents/fromList/fromList";
import TopManu from "@/components/TopMenu";
import ViewTitle from "@/forComponents/viewTitle";
import {
  hospitalRegisterSave,
  hospitalRegisterCancel,
  hospitalRegisterEdit,
  hospFeeDtlUp,
  getList,
  hosTransferApply,
  hosTransferApplyCancel,
  dischargeProcess,
  hospSettPreSett,
  hospSettA,
  dischargeUndo,
  settCl,
  getAllIcu,
  getAllBedList,
  distributeBed,
  getBuild
} from "@/api/zhuyanre";
import { getHospitalMember } from "@/api/register";
let that;
export default {
  name:"hos",
  data() {
    return {
      wardData: [
        {
          wardName: "病区一",
          hold: 100,
          null: 0
        }
      ],
      wardTitle: [
        {
          prop: "name",
          name: "病区名称",
          type: 1,
          width:'140'
        },
        {
          prop: "full_bed_count",
          name: "占",
          type: 1
        },
        {
          prop: "empty_bed_count",
          name: "空",
          type: 1
        },
          {
          prop: "sex",
          name: "病区",
          type: 1
        },
      ],
      tableTitle: [
        {
          prop: "ipt_no",
          name: "住院号A",
          type: 1
        },
        {
          prop: "name",
          name: "姓名",
          type: 1
        },
        {
          prop: "id_card",
          name: "身份证",
          type: 1,
          width:'180'
        }
      ],
      tableData: [],
      leftValue: "",
      formInline: {
        rightKeyValue: "",
        rightRadio: "0"
      },
      ben_list: [],
      userlist:[],
      is_lock:'',
      today:''
    };
  },
  mounted() {
    that = this;
    that.getAllIcu();
    that.getHospitalMember();
    that.getAllBedList();
   
    //  that.getgetDiseaseDict()
  },
  methods: {
   
    handleSizeChange() {},

    handelNative() {
      // this.$router.push({path:'/workstation/registration'})
    },
    handleCurrentChange() {},

    getDoctorList() {
      getDoctorList({ page: that.doctorPage, limit: that.doctorSize })
        .then(res => {
          let {
            data: { list }
          } = res;
          list.forEach(item => {
            let arr = {
              number: item.id,
              dept_name: item.doctor.dept_name,
              real_name: item.doctor.real_name,
              positional_title: item.doctor.positional_title,
              register_fee: item.register_fee.register_fee,
              treat_fee: item.register_fee.treat_fee,
              look_count: item.look_count,
              user_id: item.user_id
            };
            that.doctorData.push(arr);
          });
        })
        .catch(e => {
          this.$message({
            message: e.message,
            type: "error"
          });
        });
    },
    getHospitalMember() {
      let data_t = {
        ipt_no: "",
        m_keyword: "",
        icu_id: "",
        bed: "",
        status: 0,
        doctor_id: "",
        nurse_id: "",
        dept_id: "",
        
        range:'',
      };
      getHospitalMember(data_t)
        .then(res => {
          let data = res.data.list;
          that.count = res.data.count;
          data.forEach((item, key) => {
            let arr = {
              ipt_no: item.ipt_no,
              id: item.id,
              name: item.member.name,
              id_card: item.member.id_card
            };
            that.tableData.push(arr);
          });
        })
        .catch(e => {
          this.$message({
            message: e.message,
            type: "error"
          });
        });
    },
    //获取病区
    getAllIcu() {
      getAllIcu({})
        .then(res => {
          let data_y = res.data;
          console.log(data_y);
          data_y.forEach((item, key) => {
            console.log(item);
            console.log(key);
            let arr = {
              name: item.name,
              empty_bed_count: item.empty_bed_count,
              id: item.id,
              full_bed_count: item.full_bed_count,
               sex:item.sex==1?'男病区':item.sex==1?'女病区':'其他'
            };
            that.wardData.push(arr);
          });
        })
        .catch(e => {});
    },
    //饮食种类
    getdiet_list() {
      getdictIndex({ group_id: 6 })
        .then(res => {
          let data = res.data;
          data.forEach((item, key) => {
            console.log(item);
            console.log(key);
            let arr = {
              name: item.name,
              id: item.id
            };
            that.diet_list.push(arr);
          });
        })
        .catch(e => {});
    },
    is_lockchang(){
        that.getAllBedList()
    },
    //床位
    getAllBedList() {
      var data_t = {
        icu_id: 0,
        is_lock:that.is_lock==4?'':that.is_lock,
        bed: "",
        keyword: "",
        today: that.is_lock==4?'1':''
      };
      getAllBedList(data_t)
        .then(res => {
          let data = res.data.list;
          console.log(data);
          that.ben_list=[]
          data.forEach((item, key) => {
            console.log(item);
            console.log(key);
            let arr = {
              name: item.name,
              hospital: item.hospital.name ? item.hospital : false,
              id: item.id
            };
            that.ben_list.push(arr);
          });
        })
        .catch(e => {});
    },
    //获取用户
    getProfileList() {
      getProfileList({ id_card: that.formuser.id_card })
        .then(res => {
          let {
            name,
            id_card,
            birthday,
            phone,
            address,
            age,
            gender,
            id
          } = res.data;
          gender = `${gender}`;
          let data = {
            name,
            id_card,
            birthday,
            phone,
            address,
            age,
            gender,
            id
          };
          Object.keys(data).forEach(key => {
            that.$set(that.formuser, key, data[key]);
            // that.$set(that.dialogForm,key,data[key])
          });
        })
        .catch(e => {
          // that.dialogFormVisible = true
          // that.$set(that.dialogForm,"id_card",that.formuser["id_card"])
          // this.$message({
          //   message:"请建立患者档案",
          //   type: 'error'
          // });
        });
    },
    //获取用户信息
    getIdCard() {
      that.$set(that.formuser, "id_card", that.formuser.id_card);

      that.getProfileList();
    },
    //诊断
    getgetDiseaseDict() {
      getgetDiseaseDict({ page: 1, limit: 10 })
        .then(res => {
          let data = res.data;
          console.log(data);
          data.forEach((item, key) => {
            let arr = {
              name: item.name,
              id: item.id
            };
            that.dscg_maindiag_list.push(arr);
          });
        })
        .catch(e => {});
    },
    //提交住院信息
    addbtn() {
      var data = that.menfrom;
      (data.member_id = that.formuser.id),
        hospitalization(data)
          .then(res => {
            console.log(res);
          })
          .catch(e => {});
    },
    //住院分床
    handsplitben(){
      that.$router.push('/workstation/splitbed');
    }
  },
  components: {
    FromList,
    TopManu,
    ViewTitle
  }
};
</script>

<style lang="scss" scoped>
@import "./index.css";
.hosptal-patient {
}
.el-card__body {
  padding: 0px;
}
.hosptal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 280px);
  grid-gap: 20px;
}

.hosptal-card {
  padding: 0px;
  width: 280px;
  min-height: 280px;
  box-sizing: border-box;
  font-family: "仿宋";
  .card-header {
    height: 80px;
    .card-header-img {
      width: 80px;
      height: 80px;
      border-radius: 60px;
    }
  }
  .card-title {
    font-weight: bold;
    font-size: 40px;
    text-align: center;
    background: #00ffff;
    height: 50px;
    line-height: 50px;
  }
  .card-span {
    font-size: 20px;
    color: #000000;
    font-weight: bold;
  }
  .card-span > div:nth-child(1) {
    padding-top: 10px;
  }
  .card-span > div:nth-child(2) {
    padding-top: 24px;
  }
  .card-radio {
    width: 30px;
    height: 30px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 30px;
    margin-top: 20px;
  }
  .card-label {
    display: flex;
    flex-wrap: wrap;

    // grid-template-columns: 1fr 1fr 1fr;
    // grid-gap:10px;
    div {
      margin-right: 10px;
      margin-bottom: 10px;
      padding: 0 10px;
      color: #fff;
      border-radius: 4px;
      background: #e9686b;
    }
  }
  .box_user {
  }
  .img_box {
    width: 46px;
    height: 46px;
  }
  .span_title {
    font-weight: bold;
  }
  .img_kong_box {
    margin: auto;
    width: 90%;
    margin-top: 90px;
  }

  .img_kong {
    width: 100%;
    height: auto;
    margin: auto;
  }
}
</style>